<template>
  <el-dialog
    v-model="dialogVisible"
    :title="handTitle"
    fullscreen
    :append-to-body="true"
    :destroy-on-close="false"
    :before-close="onCancel"
    @close="close"
    center
    :show-close="false"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">{{ handTitle }}</h4>
        <el-button size="small" type="danger" @click="close">
          <el-icon class="el-icon--left"><ArrowLeft /></el-icon>
          返回
        </el-button>
      </div>
    </template>
    <!-- align-center -->

    <template #default>
      <el-row :gutter="24">
        <el-col :span="4">
          <div class="date-list">
            <div
              :class="['date-item', hendleIndex == index ? 'handle' : '']"
              v-for="(item, index) in dateList"
              @click="handleClick(index)"
              :key="item"
            >
              {{ item }}
            </div>
          </div></el-col
        >
        <el-col :span="16" class="identify-box">
          <div class="identify-top">
            <!-- 识别结果 -->
            <div class="identify-content">
              <el-descriptions size="small" :column="1">
                <el-descriptions-item label="G识别:">{{
                  GList.length ? '' : '无识别'
                }}</el-descriptions-item>
                <div v-if="GList.length">
                  <el-descriptions-item v-for="item in GList" :label="item.name + ':'">{{
                    item.count
                  }}</el-descriptions-item>
                </div>
                <el-descriptions-item label="D1识别:">{{
                  GList.length ? '' : '无识别'
                }}</el-descriptions-item>
                <div v-if="GList.length">
                  <el-descriptions-item v-for="item in GList" :label="item.name + ':'">{{
                    item.count
                  }}</el-descriptions-item>
                </div>
                <el-descriptions-item label="D2识别:">{{
                  GList.length ? '' : '无识别'
                }}</el-descriptions-item>
                <div v-if="GList.length">
                  <el-descriptions-item v-for="item in GList" :label="item.name + ':'">{{
                    item.count
                  }}</el-descriptions-item>
                </div>
              </el-descriptions>
            </div>
            <!-- 图片展示 -->
            <div class="img-box">
              <dropImage v-model:imageSrc="imageUrl" v-model:scale="scale"></dropImage>
            </div>
          </div>
          <!--底部按钮  -->
          <div class="button-box">
            <el-button type="primary" icon="zoom-in" @click="zoomIn">放大</el-button>
            <el-button type="primary" icon="zoom-out" @click="zoomOut">缩小</el-button>
            <el-button type="primary" icon="refresh">还原</el-button>
            <el-button type="primary" icon="pictureFilled">显示识别图</el-button>
            <el-button type="primary" icon="warningFilled" @click="showInfo">识别信息</el-button>
            <el-button type="primary" icon="tickets" @click="siteComparison">站点对比</el-button>
            <el-button type="primary" icon="download">下载图片</el-button>
            <!-- <el-button type="primary" icon="menu">启用网络</el-button> -->
          </div>
        </el-col>
        <el-col :span="4">
          <div class="urls-box">
            <el-image v-for="(url,index) in urls"  @click="handleClick(index)" :key="url" :src="imageUrl" lazy>
              <template #error>
                <div class="image-slot">
                  <el-icon><icon-picture /></el-icon>
                </div>
              </template>
            </el-image>
          </div>
        </el-col>
      </el-row>
    </template>
  </el-dialog>
  <showInfoDialog v-if="showInfoVisible" v-model:dialogVisible="showInfoVisible"></showInfoDialog>
  <siteComparisonDialog
    v-if="siteComparisonVisible"
    v-model:dialogVisible="siteComparisonVisible"
  ></siteComparisonDialog>
</template>

<script setup lang="ts">
//系统配置
import { ref, reactive, toRefs, onMounted, onBeforeMount, watchEffect } from 'vue'
import { Picture as IconPicture } from '@element-plus/icons-vue'

import useCalcUtil from '@hooks/useCalcUtil'
const { calcAdd, calcSub, calcMult, calcDiv } = useCalcUtil()

import dropImage from '../dropImage/index.vue'
import showInfoDialog from '@views/business/insectPest/showInfoDialog.vue'

import siteComparisonDialog from '@views/business/insectPest/siteComparisonDialog.vue'
//业务模型
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  handleClickName: {
    type: String,
    default: ''
  }
})
import imageUrl from '../../assets/images/logo.png'
const state = reactive({
  handTitle: '',
  dateList: [
    '2021/9/1',
    '2021/9/2',
    '2021/9/3',
    '2021/9/4',
    '2021/9/5',
    '2021/9/6',
    '2021/9/7',
    '2021/9/8',
    '2021/9/9',
    '2021/9/1',
    '2021/9/2',
    '2021/9/3',
    '2021/9/4',
    '2021/9/5',
    '2021/9/6',
    '2021/9/7',
    '2021/9/8',
    '2021/9/9'
  ],
  imgeList: [],
  hendleIndex: 0,
  GList: [
    { num: '8', count: '2', name: '二点委夜蛾' },
    { num: '24', count: '1', name: '黄地老虎' }
  ],
  imagesrc: '../../assets/images/logo.png',
  scale: 1,
  showInfoVisible: false,
  siteComparisonVisible: false,
  urls: [
    '../../assets/images/logo.png',
    '../../assets/images/logo.png',
    '../../assets/images/logo.png',
    '../../assets/images/logo.png',
    '../../assets/images/logo.png',
    '../../assets/images/logo.png',
    '../../assets/images/logo.png',
    '../../assets/images/logo.png',
    '../../assets/images/logo.png',
    '../../assets/images/logo.png',
    '../../assets/images/logo.png',
    '../../assets/images/logo.png'
  ]
})

const {
  handTitle,
  dateList,
  hendleIndex,
  GList,
  scale,
  imagesrc,
  showInfoVisible,
  siteComparisonVisible,
  urls
} = toRefs(state)
const dialogVisible = ref(props.dialogVisible)

onBeforeMount(() => {
  dialogVisible.value = props.dialogVisible
  handTitle.value = props.handleClickName
})

//点击日期
const handleClick = (inde) => {
  hendleIndex.value = inde
}
const zoomIn = () => {
  if (scale.value >= 10) return
  scale.value = calcAdd(scale.value, 0.1)
}

const zoomOut = () => {
  if (scale.value <= 0.5) return
  scale.value = calcSub(scale.value, 0.1)
}

//识别信息
const showInfo = () => {
  showInfoVisible.value = true
}
//站点对比
const siteComparison = () => {
  siteComparisonVisible.value = true
}

//关闭弹窗
// eslint-disable-next-line vue/valid-define-emits
const emit = defineEmits()
const close = async () => {
  emit('update:dialogVisible', false)
}
//api
</script>
<style lang="scss" scoped>
.user-editor-form {
  :deep(.inline) {
    display: inline-flex;
    vertical-align: middle;
    width: 50%;
  }
}
:deep(.el-dialog) {
  margin-top: 0 !important;
}
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.date-list {
  height: calc(100vh - 74px);
  overflow: auto;
  background: #dcdfe6;
}
.date-item {
  height: 32px;
  width: 100%;
  margin-top: 10px;
  //   padding: 10px;
  box-sizing: border-box;
  line-height: 32px;
  padding-left: 10px;
  cursor: pointer;
  border-top: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
}
.date-item:hover {
  border: 1px solid #b1cab2;
  color: #acd2a8;
}

.handle {
  border: 1px solid #006303;
  color: #1af811;
}
.identify-box {
  width: 100%;
}
.identify-top {
  position: relative;
}
.identify-content {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}
.img-box {
  position: absolute;
  width: 100%;
}
.button-box {
  width: 100%;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.urls-box {
  width: 100%;
  height: calc(100vh - 74px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background: #dcdfe6;
}

.urls-box .el-image {
  display: block;
  min-height: 100px;
  margin-bottom: 10px;
}
.urls-box .el-image:last-child {
  margin-bottom: 0;
}

:deep(.el-descriptions__body) {
  background-color: rgba($color: #a9a5a4, $alpha: 0.3);
}

/* 修改滚动条的样式 */
::-webkit-scrollbar {
  /* 设置滚动条的宽度:如果设置为0就是隐藏滚动条但是滚动效果还在非常完美 */
  width: 4px !important;
}

/* 滚动条的轨道 */
::-webkit-scrollbar-track {
  /* 设置滚动条轨道的背景色 */
  background-color: #f1f1f1;
}

/* 滚动条的轨道的hover颜色 */
::-webkit-scrollbar-track:hover {
  background-color: #eaeaea;
}

/* 滚动条的滑块 */
::-webkit-scrollbar-thumb {
  /* 设置滚动条滑块的背景色 */
  background-color: #888;
  border-radius: 8px;
}

/* 鼠标悬停在滚动条上的样式 */
/* 设置鼠标悬停时滚动条滑块的背景色 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

/* 滚动条的滑块在非激活状态下的样式（滑块未被点击或拖动） */
::-webkit-scrollbar-thumb:inactive {
  background-color: #ccc;
}

/* 滚动条的按钮（上下按钮） */
::-webkit-scrollbar-button {
  display: none;
}

/* 滚动条的角落（轨道和滑块交汇的部分） */
::-webkit-scrollbar-corner {
  background-color: #f1f1f1;
}
</style>
